<template>
  <main class="recommand">
    <v-btn @click="sheet = !sheet">open</v-btn>
    <my-swiper :swiperData="swiperData"></my-swiper>
    <div class="cards">
      <custom-card
        :id="'card' + item.id"
        :baseInfo="item.baseInfo"
        :key="item.id"
        v-for="item in cardsData"
        class="card"
      >
        <template #vedio-info
          ><div class="header-tips">
            <div class="tip">
              <svg style="font-size:.9rem" class="icon" aria-hidden="true">
                <use xlink:href="#icon-bofangliang" />
              </svg>
              <span>{{ item.play_volume }}</span>
            </div>
            <div class="tip">
              <svg style="font-size:.85rem" class="icon" aria-hidden="true">
                <use xlink:href="#icon-danmushu" />
              </svg>
              <span>{{ item.danmu_volume }}</span>
            </div>
            <div class="time">
              {{ item.time }}
            </div>
          </div>
        </template>
        <template #card-footer-info>
          <div class="keyword">{{ deal_keywords(item.keywords) }}</div>
        </template>
      </custom-card>
      <!-- 用这个把下面顶起来 -->
      <div class="fixbottom">-</div>
      <!-- 底部表单 -->
      <v-bottom-sheet v-model="sheet">
        <v-sheet class="bottom-sheet" height="200px">
          <v-btn
            class="sheet-btn-1"
            block
            depressed
            retain-focus-on-click
            tile
            text
            ripple
            >添加至稍后再看</v-btn
          >
          <v-divider class="hr"></v-divider>
        </v-sheet>
      </v-bottom-sheet>
    </div>
  </main>
</template>

<script>
import MySwiper from "../public/MySwiper";
import CustomCard from "../public/CustomCard";
export default {
  name: "Recommand",
  components: {
    MySwiper,
    CustomCard
  },
  data() {
    return {
      sheet: true,
      swiperData: [
        {
          imgUrl:
            "https://gitee.com/assd12138/cdnpics/raw/master/img/6617b14e69a530e1f88af8fe75be9ab2fa10c60e.jpg@880w_388h_1c_95q.jpg",
          label: "全员恶人",
          url: "https://www.bilibili.com/bangumi/play/ep337078"
        },
        {
          imgUrl:
            "https://gitee.com/assd12138/cdnpics/raw/master/img/6F97l.md.png",
          label: "助力强军事业绽放青春梦想",
          url: "https://www.bilibili.com/bangumi/play/ep336984"
        },
        {
          imgUrl:
            "https://gitee.com/assd12138/cdnpics/raw/master/img/6FAo2.md.png",
          label: "纪念抗战胜利75周年，感恩先烈",
          url: "https://www.bilibili.com/bangumi/play/ep263255"
        }
      ],
      cardsData: [
        {
          id: "BV1Zp4y1Y7Q2",
          // 这三个值可以做成对象控制其显示，并且可以后端直接传数据过来用computed算一个字符串出来
          play_volume: "32万", // 播放量
          danmu_volume: "3.6万", //弹幕数量
          love: "1020", // 收藏
          time: "11:46", // 视频时间
          keywords: ["动漫杂谈", "十月新番"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1Zp4y1Y7Q2/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/b564d156484149869062ab1df361e0f2b4dc3136.jpg",
            label: "数量激增！业界复苏！2020年十月新番导视！"
          }
        },
        {
          id: "BV1qz4y1f7zB",
          play_volume: "2.9万",
          danmu_volume: "40",
          love: "1020",
          time: "0:36",
          keywords: ["社会", "交通事故"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1qz4y1f7zB/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/6617b14e69a530e1f88af8e75be9ab2fa10c60e.jpg@880w_388h_1c_95q.jpg",
            label: "温州男子醉酒上高速 胡言乱语开“极品飞车” 结果乐极生悲"
          }
        },
        {
          id: "BV1VK411T71i",
          play_volume: "11.2万",
          danmu_volume: " 319",
          love: "1020",
          time: "02:36",
          keywords: ["搞笑视频", "美国", "川建国"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1VK411T71i/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/c5d34db9ef4eff9b14f892f3ea17c970487151de.png",
            label: "没人比我更懂相声"
          }
        },
        {
          id: "BV1xT4y1L7o1",
          play_volume: "32万",
          danmu_volume: "3.6万",
          love: "1020",
          time: "11:46",
          keywords: ["动漫杂谈", "十月新番"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1Zp4y1Y7Q2/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/b564d156484149869062ab1df361e0f2b4dc3136.jpg",
            label: "数量激增！业界复苏！2020年十月新番导视！"
          }
        },
        {
          id: "BV1Zp1Y7Q2",
          play_volume: "32万",
          danmu_volume: "3.6万",
          love: "1020",
          time: "11:46",
          keywords: ["动漫杂谈", "十月新番"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1Zp4y1Y7Q2/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/b564d156484149869062ab1df361e0f2b4dc3136.jpg",
            label: "数量激增！业界复苏！2020年十月新番导视！"
          }
        },
        {
          id: "BV1Zp4y1Q2",
          play_volume: "32万",
          danmu_volume: "3.6万",
          love: "1020",
          time: "11:46",
          keywords: ["动漫杂谈", "十月新番"],
          baseInfo: {
            url: "https://www.bilibili.com/video/BV1Zp4y1Y7Q2/",
            imgUrl:
              "https://gitee.com/assd12138/cdnpics/raw/master/img/b564d156484149869062ab1df361e0f2b4dc3136.jpg",
            label: "数量激增！业界复苏！2020年十月新番导视！"
          }
        }
      ]
    };
  },
  methods: {
    deal_keywords(keywords) {
      let str = "";
      keywords.forEach(e => {
        str += ` ${e} ·`;
      });
      return str.substr(0, str.length - 1);
    }
  },
  mounted() {
    this.cardsData.forEach(e => {
      let card = document.querySelector(`#card${e.id}`);
      card.addEventListener("long-press", () => {
        this.sheet = !this.sheet;
      }); // 长按卡片弹出遮罩层
      card.addEventListener("contextmenu", event => {
        event.preventDefault();
      });
    });
  }
};
</script>

<style lang="stylus" scoped>
.recommand
  background-color rgb(244,244,244)
  .cards
    display flex
    flex-flow row wrap
    .card
      flex 0 0 47%
      margin 5px
      user-select none
      -webkit-touch-callout none
      -webkit-user-select none
      -khtml-user-select none
      -moz-user-select none
      -ms-user-select none
      user-select none
      .header-tips
        width 100%
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))
        display flex
        position absolute
        bottom 0
        font-size .7rem
        color white
        align-items center
        font-weight 700
        .tip
          margin-left .5rem
        .time
          margin-left auto
          margin-right .5rem
      .keyword
        color rgb(153,153,153)
        font-size .8rem
        margin .1rem .5rem
        bottom 0
  .fixbottom
    height 56px
 .bottom-sheet
   .hr
     margin-left 1rem
  .sheet-btn-1
    height 3rem !important
.sheet-btn-1 >>> .v-btn__content
  justify-content flex-start
</style>
